<template>
  <div class="container with-nav-padding">
    <div v-for="(c, i) in commentList" :key="c.id">
      <div class="comment-bar">
        <div class="bar-left">
          <div class="icon">
            <img :src="c.img_show" alt="" />
          </div>
          宝贝评价
        </div>
        <div class="rank">
          <img
            v-for="(item, index) in c.level"
            @click="setRank(index + 1, i)"
            :key="index"
            src="@/assets/商品详情-图片-assets/sc.png"
            alt=""
          />
          <img
            v-for="(item, index) in 5 - c.level"
            @click="setRank(index + 1 + c.level, i)"
            :key="'1' + index"
            src="@/assets/商品详情-加入购物车-assets/收藏.png"
            alt=""
          />
          {{ c.level }}
        </div>
      </div>
      <div class="comment-content">
        <textarea
          v-model="c.content"
          placeholder="从不同角度给宝贝更全面的评价，可以帮助到更多小伙伴"
          name=""
          id=""
        ></textarea>
        <div class="img-area">
          <img
            @click="
              c.fileList.splice(img_index, 1);
              $forceUpdate();
            "
            class="comment-img"
            v-for="(img, img_index) in c.fileList"
            :key="img_index"
            :src="img"
          />
          <label
            v-if="c.fileList.length < 3"
            class="add-img"
            :for="'comment' + i"
          >
            <div class="box">
              <div class="text">添加图片</div>
            </div>
          </label>

          <input
            :ref="'file' + i"
            @change="fileUpload(i)"
            type="file"
            :id="'comment' + i"
            style="position:absolute; clip:rect(0 0 0 0);"
            multiple
            accept="image/*"
          />
        </div>
      </div>
    </div>
    <!-- <div style="height:3.125rem; background:#fff;"></div> -->
    <button @click="comment" class="bottom-btn">发布评价</button>
  </div>
</template>

<script>
import { fileUpload } from "@/api/file";
import { orderComment, getOrderCommentDetail } from "@/api/profile";

export default {
  data() {
    return {
      commentList: []
    };
  },
  methods: {
    comment() {
      let arr = [];
      for (let i in this.commentList) {
        if (this.commentList[i].level === 0) {
          this.$dialog.toast({
            mes: "请进行评分",
            timeout: 1500,
            icon: "error"
          });
          return;
        }
        arr.push({
          content: this.commentList[i].content.trim(),
          image: this.commentList[i].fileList,
          level: this.commentList[i].level,
          id: this.commentList[i].id
        });
      }

      orderComment({
        order_no: this.$route.query.order_no,
        data: arr
      }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "感谢您的评价",
            timeout: 1500,
            icon: "success"
          });
          this.$router.go(-1);
        }
      });
    },
    setRank(rank, index) {
      this.commentList[index].level = rank;
    },
    fileUpload(index) {
      if (
        document.getElementById("comment" + index).files.length +
          this.commentList[index].fileList.length >
        3
      ) {
        this.$dialog.toast({
          mes: "最多支持上传3张图片",
          timeout: 2000,
          icon: "error"
        });
        return;
      }
      for (
        let i = 0;
        i < document.getElementById("comment" + index).files.length;
        i++
      ) {
        let formData = new FormData();
        formData.append(
          "file",
          document.getElementById("comment" + index).files[i]
        );
        fileUpload(formData).then(res => {
          if (res.status === 200) {
            this.commentList[index].fileList.push(res.data.data.file);
          }
        });
      }
    }
  },
  created() {
    if (this.$route.query.order_no) {
      getOrderCommentDetail({ order_no: this.$route.query.order_no }).then(
        res => {
          if (res.status === 200) {
            res.data.data.commodity.forEach(item => {
              this.commentList.push({
                id: item.id,
                img_show: item.img_show,
                fileList: [],
                level: 0,
                content: ""
              });
            });
          }
        }
      );
    } else {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  font-size: 0.64rem;
  .bottom-btn {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    background: #0078ff;
    color: #fff;
    border: none;
  }

  .comment-bar {
    background-color: #fff;
    height: 2.8rem;
    line-height: 2.8rem;
    display: flex;
    padding: 0 3.2%;
    color: #444444;
    margin: 0.48rem 0;

    .bar-left {
      .icon {
        display: inline-block;
        height: 2rem;
        width: 2rem;
        background-color: #dfdfdf;
        vertical-align: middle;
        margin-right: 0.48rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      margin-right: 0.48rem;
    }

    .rank {
      img {
        width: 0.6rem;
        vertical-align: middle;
        margin: 0 0.1rem;
      }
    }
  }

  .comment-content {
    padding: 0 3.2%;
    background: #fff;

    textarea {
      border: none;
      height: 5rem;
      width: 100%;
      margin: 0.7rem 0;
    }

    .img-area {
      padding-bottom: 0.5rem;

      .add-img {
        width: 4rem;
        display: inline-block;
        vertical-align: top;
        margin: 0.12rem;

        .box {
          width: 4rem;
          height: 4rem;
          border: 1px dashed rgba(204, 204, 204, 1);
          background-image: url("../../../assets/发布评价-两个商品-assets/相机.png");
          background-size: 1.2rem 0.96rem;
          background-repeat: no-repeat;
          background-position: 50% 40%;

          .text {
            text-align: center;
            font-size: 0.48rem;
            margin-top: 2.5rem;
            color: #999999;
          }
        }
      }

      .comment-img {
        width: 4rem;
        height: 4rem;
        margin: 0.12rem;
        vertical-align: top;
      }
    }
  }
}
</style>
